// 解构出函数
// createRouter:创建路由函数
// createWebHashHustory:哈希模式
// createWebHustory：Hustory模式
import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout'
import Home from '@/views/Home'
// 路由配置-----------路径和映射组件的关系🐒

// 箭头函数方式是按需加载（如果是登录页。。。。。就是不一定会点击到页面就不必打包到js文件中）
// component: () => import('@/views/category')
// 这种是直接打包到js文件中（如果是首页，，就是经常要切换到的页面就需要用到这种，因为打包到js文件中访问速度比按需加载快）
// import Layout from '@/views/Layout'

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        component: Home
      },
      {
        path: 'category/:id',
        component: () => import('@/views/category')
      },
      {
        path: 'category/sub/:id',
        component: () => import('@/views/category/sub.vue')
      },
      {
        path: 'product/:id',
        component: () => import('@/views/goods')
      },
      {
        path: 'shopping',
        component: () => import('@/views/cart')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login')
  },
  {
    path: '/login/callback',
    component: () => import('@/views/login/callback.vue')
  }
]

// 创建路由实例
const router = createRouter({
  // 使用哈希路由模式
  history: createWebHashHistory(),

  // 添加滚动行为，当路由发生变化的时候将页面显示顶🐒
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    return { top: 0 }
  },
  // 配置路由
  routes
})

// 导出路由实例
export default router
